<template>
  <el-transfer
    v-model="value"
    filterable
    :filter-method="filterMethod"
    filter-placeholder="State Abbreviations"
    :data="data"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'

interface Option {
  key: number
  label: string
  initial: string
}
const router = useRouter();
const generateData = () => {
  const data: Option[] = []
  const states = [
    'California',
    'Illinois',
    'Maryland',
    'Texas',
    'Florida',
    'Colorado',
    'Connecticut ',
  ]
  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT']
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: initials[index],
    })
  })
  return data
}

const data = ref<Option[]>(generateData())
const value = ref([] as number[])

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}

// 获取选项数据
const fetchTransferOptions = async () => {
   try {
     const response = await axios.get('/list');
     data.value = response.data;
   } catch (error) {
     console.error('Error fetching transfer options:', error);
   }
};

// 处理转移操作
const handleTransfer = async (direction: 'left' | 'right') => {
   const selectedItems = value.value;
   try {
     const response = await axios.post('/list', { selectedItems });
     console.log('Transfer successful:', response.data);
     // 根据需要处理响应数据
   } catch (error) {
     console.error('Error during transfer:', error);
   }
};

// 在组件加载时获取选项数据
fetchTransferOptions();
</script>
